<template>
	<view class="global">
		<view class="content">
			<uni-swiper-dot @clickItem="clickItem" :info="info" :current="current" :mode="mode" field="content"
				:dotsStyles="dotsStyles">
				<swiper class="swiper-style" @change="change" :current="swiperDotIndex" :indicator-dots="indicatorDots"
					:autoplay="autoplay" :interval="interval" :duration="duration">
					<swiper-item v-for="(item, index) in info" :key="index" class="swiper-item-style">
						<view>
							<image :src="item.url" class="swiper-image" />
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<view class="content-btn">
			<view class="btn" @click="jumpCancellation">
				<image src="../../static/btn/icon1@3x.png" class="btn-image"></image>
				<view>企业注销</view>
			</view>
			<view class="btn">
				<image src="../../static/btn/Project-application.png" class="btn-image"></image>
				<view>项目申请</view>
			</view>
			<view class="btn">
				<image src="../../static/btn/aptitude.png" class="btn-image"></image>
				<view>资质认定</view>
			</view>
			<view class="btn">
				<image src="../../static/btn/More.png" class="btn-image"></image>
				<view>更多</view>
			</view>
		</view>
		<view class="line"></view>
		<view class="push">
			<view class="push-title">潜客推送</view>
			<view class="push-content" v-for="(item, index) in enterpriseList" :key="index">
				<view class="push-content-list" @click="jumpCompanyInfo(item.name)">
					<view class="push-list">
						<view class="push-company">{{item.name}}</view>
						<view class="push-phone">
							<image src="../../static/btn/icon2@3x.png" class="push-icon" v-if="item.hasMobile == true">
							</image>
							<image src="../../static/btn/icon3@3x.png" class="push-icon-one"
								v-if="item.hasPhone == true && item.hasMobile == false"></image>
							<image src="../../static/btn/icon3@3x.png" class="push-icon"
								v-if="item.hasPhone == true && item.hasMobile == true"></image>
						</view>
					</view>
					<view class="push-list1">
						<view class="push-list-left">
							<view class="push-potential">{{item.potentialValue}}潜力值</view>
							<view class="push-gps">
								<image src="../../static/btn/icon4@3x.png" class="push-icon-gsp"></image>
								<view>{{item.province}}</view>
							</view>
						</view>
						<view class="push-recent" v-if="item.hasBrowse">
							<image src="../../static/btn/icon5@3x.png" class="push-recent-browse"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="foot">
			<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="5000" :duration="500">
				<swiper-item v-for="(item, index) in bulletinBoardList" :key="index">
					<view class="foot-imag" :style="{background: 'url('+imageURL+')',backgroundSize: '100% 100%'}">
						<view class="bulletin-title item">{{item.title}}</view>
						<view class="bulletin-laber item">{{item.label}}</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import {
		bulletinBoard,
		getEnterprise
	} from '../../models/index.js'
	import {
		UniSwiperDot
	} from "@dcloudio/uni-ui"
	export default {
		components: {
			UniSwiperDot
		},
		data() {
			return {
				bulletinBoardList: [],
				enterpriseList: [],
				selectParam: {
					pageIndex: 0,
					pageSize: 5
				},
				info: [{
						url: '../../static/swiper_images/banner1@3x.png'
					},
					{
						url: '../../static/swiper_images/banner2@3x.png'
					}
				],
				current: 0,
				mode: 'default', //default 、round 、 indexes、nav
				swiperDotIndex: 0,
				indicatorDots: false,
				autoplay: true,
				interval: 2000,
				duration: 500,
				dotsStyles: {
					backgroundColor: '#999999',
					border: '1px #999999 solid',
					color: '#fff',
					selectedBackgroundColor: 'rgba(255, 253, 249, 0.9)',
					selectedBorder: '1px rgba(255, 254, 252, 0.9) solid'
				},
				imageURL: '../../static/banner.png',
				cacheList: []
			}
		},
		onLoad() {
			// 判断是否已经登录
			if (uni.getStorageSync('token') == '') {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
		},
		onShow() {
			this.enterpriseList = []
			this.bulletinBoardList = []
			this.getEnterpriseList()
			this.getBulletinBoard()
		},
		methods: {
			// 查询首页企业数据
			getEnterpriseList() {
				getEnterprise(this.selectParam).then((res) => {
					this.enterpriseList = res.data.results
					//清除缓存,查询最近浏览
					this.recent()
				})
			},
			//清除缓存,查询最近浏览
			recent() {
				this.cacheList = uni.getStorageSync('recent_browse');
				// console.log(this.cacheList)
				var time = new Date().toLocaleDateString(); //获取当前年月日
				var year = new Date().getFullYear(); //获取完整的年份(4位)
				var moth = new Date().getMonth(); //获取当前月份(0-11,0代表1月)
				var day = new Date().getDate(); //获取当前日(1-31)
				var time1 = year + '/' + moth + '/' + day //当前时间的前一个月
				// 删除一个月之前的数据(由于根据key值删除缓存会将整个删除,所以先获取数组,根据条件删除数组的值,再进行缓存存储)
				for (var i = 0; i < this.cacheList.length; i++) {
					if (this.cacheList[i].time <= time1) {
						this.cacheList.splice(i, 1)
						uni.setStorage({
							key: 'recent_browse',
							data: this.cacheList
						});
					}
				}
				//根据缓存中的企业名与企业数据的企业名进行对比,两个名称一致时,出现最近浏览的标志
				for (var i = 0; i < this.cacheList.length; i++) {
					for (var j = 0; j < this.cacheList[i].browse.length; j++) {
						for (var k = 0; k < this.enterpriseList.length; k++) {
							if (this.enterpriseList[k].name == this.cacheList[i].browse[j]) {
								this.enterpriseList[k].hasBrowse = true
							}
						}
					}
				}
			},
			// 查询底部公告栏数据
			getBulletinBoard() {
				bulletinBoard().then((res) => {
					// console.log(res.data)
					this.bulletinBoardList = res.data
				})
			},
			// 轮播图更换
			change(e) {
				this.current = e.detail.current
			},
			// 轮播图下标点的点击事件
			clickItem(e) {
				this.swiperDotIndex = e
			},
			// 企业注销按钮跳转页面
			jumpCancellation() {
				uni.navigateTo({
					url: '../cancellation/cancellation'
				});
			},
			// 企业名称跳转至企业详情页面
			jumpCompanyInfo(name) {
				uni.navigateTo({
					url: '../enterpriseDetail/enterpriseDetail?name=' + name
				});
			}
		}
	}
</script>
<style lang="scss">
	.global {
		padding: 5rpx 5rpx 0;
	}

	.swiper-style {
		height: 302rpx;
	}

	.swiper-item-style {
		/* 如果需要让图片各方位居中 */
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.swiper-image {
		width: 729rpx;
		height: 302rpx;
		border-radius: 20rpx;
		object-fit: contain
	}

	.content-btn {
		height: 100rpx;
		padding: 10rpx 47rpx;
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: flex-end;
	}

	.btn {
		width: 80rpx;
		height: 80rpx;
		font-size: 20rpx;
		text-align: center;
	}

	.btn-image {
		height: 80rpx;
		width: 80rpx;
	}

	.line {
		width: 100%;
		height: 10rpx;
		background-color: #f7f7f7;
		margin-top: 54rpx;
	}

	.push {
		padding: 26rpx 0rpx;
	}

	.push-title {
		font-size: 32rpx;
		font-weight: 600;
		padding: 0 26rpx
	}

	.push-content-list {
		margin-top: 20rpx;
	}

	.push-list {
		display: flex;
		flex-wrap: nowrap;
		align-items: flex-end;
		height: 50rpx;
		justify-content: space-between;
		padding: 10rpx 26rpx 0
	}

	.push-list1 {
		display: flex;
		flex-wrap: nowrap;
		align-items: flex-end;
		height: 50rpx;
		justify-content: space-between;
		padding: 0 26rpx 10rpx
	}

	.push-list-left {
		display: flex;
		flex-wrap: nowrap;
		align-items: flex-end;
		width: 420rpx;
		justify-content: space-between;
	}

	.push-company {
		font-size: 34rpx;
		width: 570rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.push-potential {
		font-size: 28rpx;
		color: red;
	}

	.push-phone {
		height: 50rpx;
		width: 120rpx;
	}

	.push-gps {
		height: 50rpx;
		display: flex;
		flex-wrap: nowrap;
		align-items: flex-end;
	}

	.push-icon {
		width: 25rpx;
		height: 25rpx;
		padding: 18rpx;
	}

	.push-icon-one {
		width: 25rpx;
		height: 25rpx;
		padding: 18rpx;
		float: right;
	}

	.push-icon-gsp {
		width: 25rpx;
		height: 32rpx;
		padding: 4rpx 10rpx;
	}

	.push-recent {
		height: 50rpx;
	}

	.push-recent-browse {
		width: 115rpx;
		height: 43rpx;
		padding: 6rpx;
	}

	// .push-content-list:hover {
	// 	background-color: #f2f2f2;

	// 	.push-company {
	// 		color: #848484;
	// 	}
	// 	.push-potential{
	// 		color: #fb767d;
	// 	}
	// 	.push-gps{
	// 		color: #848484;
	// 	}
	// }
	.foot {
		width: 100%;
		height: 300rpx;

		.swiper {
			height: 300rpx;
			position: relative;
		}

		.foot-imag {
			width: 100%;
			height: 300rpx;
		}
	}

	.item {
		font-size: 40rpx;
		color: #FFFFFF;
		font-weight: 600;
	}

	.bulletin-title {
		position: absolute;
		top: 85rpx;
		left: 80rpx;
	}

	.bulletin-laber {
		position: absolute;
		top: 160rpx;
		left: 260rpx;
	}
</style>
